<div class="container-fluid">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title mb-0">创建维修请求</h4>
        </div>
        <div class="card-body">
          <form [formGroup]="repairForm" (ngSubmit)="onSubmit()">
            <div class="row">
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="deviceId" class="form-label">选择设备 *</label>
                  <select 
                    class="form-select" 
                    id="deviceId" 
                    formControlName="deviceId"
                    [class.is-invalid]="isFieldInvalid('deviceId')">
                    <option value="">请选择设备</option>
                    <option *ngFor="let device of devices" [value]="device.id">
                      {{ device.name }} ({{ device.serialNumber }})
                    </option>
                  </select>
                  <div class="invalid-feedback" *ngIf="isFieldInvalid('deviceId')">
                    {{ getFieldError('deviceId') }}
                  </div>
                </div>
              </div>
              
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="priority" class="form-label">优先级 *</label>
                  <select 
                    class="form-select" 
                    id="priority" 
                    formControlName="priority"
                    [class.is-invalid]="isFieldInvalid('priority')">
                    <option *ngFor="let priority of priorities" [value]="priority.value">
                      {{ priority.label }}
                    </option>
                  </select>
                  <div class="invalid-feedback" *ngIf="isFieldInvalid('priority')">
                    {{ getFieldError('priority') }}
                  </div>
                </div>
              </div>
            </div>

            <div class="mb-3">
              <label for="title" class="form-label">标题 *</label>
              <input 
                type="text" 
                class="form-control" 
                id="title" 
                formControlName="title"
                placeholder="请输入维修请求标题"
                [class.is-invalid]="isFieldInvalid('title')">
              <div class="invalid-feedback" *ngIf="isFieldInvalid('title')">
                {{ getFieldError('title') }}
              </div>
            </div>

            <div class="mb-3">
              <label for="description" class="form-label">问题描述 *</label>
              <textarea 
                class="form-control" 
                id="description" 
                rows="4"
                formControlName="description"
                placeholder="请详细描述设备问题"
                [class.is-invalid]="isFieldInvalid('description')"></textarea>
              <div class="invalid-feedback" *ngIf="isFieldInvalid('description')">
                {{ getFieldError('description') }}
              </div>
            </div>

            <div class="row">
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="requestedBy" class="form-label">申请人 *</label>
                  <input 
                    type="text" 
                    class="form-control" 
                    id="requestedBy" 
                    formControlName="requestedBy"
                    placeholder="请输入申请人姓名"
                    [class.is-invalid]="isFieldInvalid('requestedBy')">
                  <div class="invalid-feedback" *ngIf="isFieldInvalid('requestedBy')">
                    {{ getFieldError('requestedBy') }}
                  </div>
                </div>
              </div>
              
              <div class="col-md-6">
                <div class="mb-3">
                  <label for="estimatedCost" class="form-label">预估费用</label>
                  <div class="input-group">
                    <span class="input-group-text">¥</span>
                    <input 
                      type="number" 
                      class="form-control" 
                      id="estimatedCost" 
                      formControlName="estimatedCost"
                      placeholder="0.00"
                      min="0"
                      step="0.01">
                  </div>
                </div>
              </div>
            </div>

            <div class="d-flex justify-content-between">
              <button type="button" class="btn btn-secondary" routerLink="/repair-requests">
                取消
              </button>
              <button 
                type="submit" 
                class="btn btn-primary"
                [disabled]="submitting">
                <span *ngIf="submitting" class="spinner-border spinner-border-sm me-2"></span>
                {{ submitting ? '提交中...' : '提交请求' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div> 